import Vue from 'vue'
import VueRouter from 'vue-router'
// 导入登录页面组件
import Login from '@/views/Login'
// 导入注册页面组件
import Reg from '@/views/Reg'
// 导入首页加载组件
import Layout from '@/views/Layout'
// 导入二级路由首页组件
import Home from '@/views/Home'
// 导入文章分类
import Artcategory from '@/views/Artcategory'
// 导入文章列表
import ArtList from '@/views/ArtList'
// 导入个人中心/基本资料
import UserInfo from '@/views/UserInfo'
// 导入个人中心更换头像
import ChangeAvatar from '@/views/ChangeAvatar'
// 导入个人中心/重置密码
import ResetPwd from '@/views/ResetPwd'

Vue.use(VueRouter)

const router = new VueRouter({
  routes: [
    { path: '/login', component: Login },
    { path: '/reg', component: Reg },
    {
      path: '/',
      component: Layout,
      // 二级路由入口,在Layout.vue el-main中 配置二级路由的出口
      children: [
        { path: '/', component: Home },
        { path: '/artcategory', component: Artcategory },
        { path: '/artlist', component: ArtList },
        { path: '/userinfo', component: UserInfo },
        { path: '/changeavatar', component: ChangeAvatar },
        { path: '/resetpwd', component: ResetPwd }
      ]
    }
  ]
})
// 路由的前置导航守卫 核心点事放行(白名单路由地址的切换)
// to 到哪里去
// from 从哪里来 /login --> /  to和from 是一个路由信息对象
// next() 是一个放行函数可以直接调用 类似编程式导航 this.$router.push()
// 需求: 用户只要访问有权限的页面(首页/文章/个人中心...) 如果没有登录 拦截
// 创建一个白名单
const whiteList = ['/login', '/reg']
router.beforeEach((to, from, next) => {
  if (whiteList.includes(to.path)) {
    next()
  } else {
    // 访问的是有权限的页面
    // 1.先判断是否有token
    if (localStorage.getItem('bigevent-token')) {
      next()
    } else {
      // 没有token拦截到登录页面让用户重新登录
      next('/login')
    }
  }
})

export default router
